<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
  <th:block th:include="include :: header('新增物流信息')" />
  <th:block th:include="include :: datetimepicker-css" />
</head>

<body class="white-bg">
  <div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-keira-add">
      <div class="col-xs-12">
        <div class="form-group">
          <label class="col-sm-3 control-label">运单号：</label>
          <div class="col-sm-8">
            <input name="orderNo" class="form-control" type="text">
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="form-group">
          <label class="col-sm-3 control-label">寄件时间：</label>
          <div class="col-sm-8">
            <div class="input-group date">
              <input name="sendingTime" class="form-control" placeholder="yyyy-MM-dd" type="text">
              <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="form-group">
          <label class="col-sm-3 control-label is-required">寄件人：</label>
          <div class="col-sm-8">
            <input name="sendingMan" class="form-control" type="text" required>
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="form-group">
          <label class="col-sm-3 control-label">寄件人详细地址：</label>
          <div class="col-sm-8">
            <textarea name="sendingAddress" class="form-control"></textarea>
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="form-group">
          <label class="col-sm-3 control-label">寄件公司：</label>
          <div class="col-sm-8">
            <input name="sendingCompany" class="form-control" type="text">
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="form-group">
          <label class="col-sm-3 control-label is-required">收件人：</label>
          <div class="col-sm-8">
            <input id="receivingMan" name="receivingMan" class="form-control" type="text" required>
            <textarea id="receivingAddress" name="receivingAddress" class="form-control"></textarea>
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="form-group">
          <label class="col-sm-3 control-label">收件人详细地址：</label>
          <div class="col-sm-8">
            <textarea name="receivingAddress" class="form-control"></textarea>
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="form-group">
          <label class="col-sm-3 control-label">件数：</label>
          <div class="col-sm-8">
            <input name="sendingCount" class="form-control" type="text">
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="form-group">
          <label class="col-sm-3 control-label">实际重量(kg)：</label>
          <div class="col-sm-8">
            <input name="sendingWeight" class="form-control" type="text">
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="form-group">
          <label class="col-sm-3 control-label">体积(m³)：</label>
          <div class="col-sm-8">
            <input name="sendingVolume" class="form-control" type="text">
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="form-group">
          <label class="col-sm-3 control-label">物品名称：</label>
          <div class="col-sm-8">
            <input name="itemName" class="form-control" type="text">
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="form-group">
          <label class="col-sm-3 control-label">包装类型：</label>
          <div class="col-sm-8">
            <select name="packageType" class="form-control" th:with="type=${@dict.getType('package_type')}">
              <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
            </select>
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="form-group">
          <label class="col-sm-3 control-label">支付类型：</label>
          <div class="col-sm-8">
            <select name="payType" class="form-control" th:with="type=${@dict.getType('pay_type')}">
              <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
            </select>
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="form-group">
          <label class="col-sm-3 control-label is-required">运费：</label>
          <div class="col-sm-8">
            <input name="shippingFee" class="form-control" type="text" required>
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="form-group">
          <label class="col-sm-3 control-label">备注：</label>
          <div class="col-sm-8">
            <textarea name="remark" class="form-control"></textarea>
          </div>
        </div>
      </div>
    </form>
  </div>
  <th:block th:include="include :: footer" />
  <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
  <th:block th:include="include :: datetimepicker-js" />
  <script th:inline="javascript">
    var prefix = ctx + "keira/keira"
    $("#form-keira-add").validate({
      focusCleanup: true
    });

    function submitHandler() {
      if ($.validate.form()) {
        $.operate.save(prefix + "/add", $('#form-keira-add').serialize());
      }
    }

    $("input[name='sendingTime']").datetimepicker({
      format: "yyyy-mm-dd",
      minView: "month",
      autoclose: true
    });


    // 初始化 收件人 支持远程搜索 + 选择
    $('#receivingMan').typeahead({
      source: function (query, result) {
        // 防空判断
        if (!query || query.length < 1) {
          return result([]);
        }

        // 发起 AJAX 请求到后端搜索接口
        $.ajax({
          url: 'http://10.10.112.205:8888/keira/keira/keira/userInfo',  
          type: "GET",
          data: { text: query }, 
          dataType: "json",
          success: function (res) {
            if (res.code === 0 && res.data && res.data.length > 0) {
              // 提取收件人姓名作为下拉选项
              var suggestions = res.data.map(function (item) {
                // 存储完整对象到全局缓存（方便后续回显）
                window.receiverCache = window.receiverCache || {};
                window.receiverCache[item.userName] = item;
                return item.userName;
              });
              result(suggestions); // 显示下拉列表
            } else {
              result([]); // 无结果
            }
          },
          error: function () {
            layer.msg("搜索失败，请稍后重试");
            result([]);
          }
        });
      },
      minLength: 1,        // 至少输入1个字符才触发
      items: 8,            // 最多显示8条
      matcher: function (item) {
        // 默认模糊匹配（可被 source 替代）
        return true;
      },
      updater: function (selectedName) {
        var selected = (window.receiverCache || {})[selectedName];
        if (selected) {
            $('#receivingAddress').val(selected.userAddress || '');
        }
        return selectedName;
      }
    });

    $('#receivingAddress').typeahead({
    source: function (query, result) {
        if (!query || query.length < 1) return result([]);

        $.ajax({
            url: prefix + "/userInfo",
            type: "GET",
            data: { keyword: query },
            dataType: "json",
            success: function (res) {
                if (res.code === 0 && res.data && res.data.length > 0) {
                    var suggestions = res.data.map(function (item) {
                        var name = item.userName;
                        var addr = item.userAddress;

                        // 同样维护两个缓存
                        window.receiverCacheByName[name] = item;
                        window.receiverCacheByAddress[addr] = item;

                        return addr; // 返回地址作为下拉选项
                    });
                    result(suggestions);
                } else {
                    result([]);
                }
            },
            error: function () {
                layer.msg("搜索失败，请稍后重试");
                result([]);
            }
        });
    },
    minLength: 1,
    items: 8,
    updater: function (selectedAddress) {
        var selected = window.receiverCacheByAddress[selectedAddress];
        if (selected) {
            $('#receivingMan').val(selected.userName || '');
        }
        return selectedAddress;
    }
});

  </script>
</body>

</html>